<template>
	<view class="count" style="">
		<view class="fanhui" @click="fanhui">
			<image   src="https://wechat-pictures-1301970825.file.myqcloud.com/yangji/fanhui.png"></image>
		</view>
		<view class="title">换鸡蛋 </view>
		<view class="jidan-list">
			<view class="jidan-item" v-for="(item,index) in 5">
				<image v-if="5-index<=list.eggs" class="jidans" src="https://wechat-pictures-1301970825.file.myqcloud.com/yangji/jidian.png"></image>
				<image  src="https://wechat-pictures-1301970825.file.myqcloud.com/yangji/wo.png"></image>
			</view>
		</view>
		<view class="tizi">
			<view class="duihuan" @click="duihuan">兑换</view>
			<view class="top">兑换记录</view> 
			<view class="tixian-list">
              <no_order v-if="!list.duihuan_list[0]" title="暂无兑换记录"></no_order>
				<view class="tixian-item" v-for="(item,index) in list.duihuan_list">
					<view class="time">{{item.update_time}}</view>
					<view class="item-msg">兑换了{{item.nums}}枚鸡蛋</view>
				</view>
			</view>
		</view>
		<view v-show="is_show" class="qcode">
			<view style="width: 100%;height: 400upx;">
				<uqrcode class="uqrcode" ref="uqrcode"></uqrcode>
			</view>

			<view class="qcode-title">拿给店长看，可以领鸡蛋</view>
			<view @click="guanbi" class="qcode-button">关闭</view>
		</view>
		<view @click="guanbi" v-if="is_show" class="zhezhao"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				is_show:false
			}
		},
		onShow() {
		 this.get_list()
		},
		methods:{
			get_list()
			{
				var _this=this;
				_this.$api.doRequest("get","api/duihuan_eggs_and_list").then(res=>{
					_this.list=res.data.data
				})
			},
			duihuan(){
				var _this=this;

				_this.$api.doRequest('get',"api/duihuan_eggs_create_order2").then(res=>{
					if(res.data.code==200){
						_this.is_show=true
						_this.$refs.uqrcode.make({
						           mode: 'view', // 默认为view
						           size: "200",
						           text: 'https://newplatform.renruikeji.cn/home/#/pages/qcode/saoyisao?orderid='+res.data.data
						       })
						       .then(res => {
						           // 返回的res与uni.canvasToTempFilePath返回一致
						           console.log(res)
						       })
					}

				})
			},
			fanhui()
			{
				uni.redirectTo({
					url:"../index/index"
				})
			},
			guanbi()
			{
				this.is_show=!this.is_show
				this.get_list()
			}
		}
	}
</script>

<style>
	.uqrcode{
		position: absolute;
		top: 20upx;
		left:50%;
		transform: translate(-50%);
	}
	page{
/* 		overflow: hidden; */
	}
	.count {
		width: 100%;
		background-image: url('https://wechat-pictures-1301970825.file.myqcloud.com/yangji/jidiankuang.png');
		background-size: 100% auto;
		box-sizing: border-box;
		padding-top: 176upx;
	}

	.title {
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		font-size: 128upx;
	}

	.jidan-list {
		width: 690upx;
		height: 483upx;
		margin: 0 auto;
		margin-top: 64upx;
		background-image: url('https://wechat-pictures-1301970825.file.myqcloud.com/yangji/bk.png');
		background-size: 100% 100%;
		display: flex;
		flex-wrap: wrap-reverse;
		/* flex-wrap: wrap; */
		box-sizing: border-box;
		justify-content: center;
		padding: 0upx 50upx 64upx 50upx;
		z-index: 2;
		position: relative;
		animation: jidan 1s;
		transform: rotateY(180deg);
	}
	@keyframes jidan{
		from{
			transform: rotateY(0deg);
		}
		to{
			transform: rotateY(180deg);
		}
	}

	.jidan-item {
		width: 173upx;
		height: 145upx;
		display: flex;
		/* justify-content: flex-end; */
		align-items: flex-end;
		margin: 0 13upx;
		position: relative;
	}
	.jidans{
		position: absolute;
		top: 0;
		z-index: 1;
		height: 112upx !important;
		width: 84upx !important;
		left: 50%;
		transform: translate(-50%);
	}

	.jidan-item image {
		width: 173upx;
		height: 114upx;
	}

	.tizi {
		width: 100%;
		background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/yangji/tizi.png);
		background-size: 100% 100%;
		margin-top: -50upx;
		padding-top: 110upx;
		box-sizing: border-box;
		z-index: 1;
		padding-bottom: 100upx;
		position: relative;
	}

	.duihuan {
		width: 364upx;
		height: 116upx;
		background: linear-gradient(90deg, #FFF163 0%, #FFD400 100%);
		border-radius: 62upx;
		margin: 0 auto;
		text-align: center;
		line-height: 116upx;
		color: #D44000;
		font-size: 48upx;
	}

	.tixian-list {
		width: 690upx;
		height: 768upx;
		background-color: #FFFFFF;
		margin: 138upx auto;
		margin-bottom: 0upx;
		border-radius: 24upx;
		padding: 0 32upx;
		overflow: auto;
		box-sizing: border-box;
		padding-top: 100upx;
		position: relative;
	}

	.tixian-item {
		width: 100%;
		height: 128upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1upx solid #CCCCCC;
	}

	.time {
		font-size: 36upx;
		color: #979CA2;
	}

	.item-msg {
		font-size: 36upx;
		color: #1E1F21;
	}

	.top {
		width: 360upx;
		height: 88upx;
		background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/yangji/duihuan-log-top.png);
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		top: 351upx;
		z-index: 10;
		line-height: 88upx;
		text-align: center;
		font-size: 44upx;
		color: #FFFFFF;
	}
	.qcode{
		width: 640upx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		flex-direction: column;
		border-radius: 16upx;
	}
	.qcode .qcode-title{
		font-size: 48upx;
		margin-top:64upx ;
	}
	.qcode .qcode-button{
		width: 320upx;
		height: 80upx;
		color: #FFFFFF;
		background: linear-gradient(135deg, #F98148 0%, #F64A45 100%);
		border-radius: 8upx;
		line-height: 80upx;
		text-align: center;
		margin-top: 28upx;
		margin-bottom: 80upx;
	}
	.zhezhao{
		width: 100%;
		height: 100vh;
		background-color: #000000;
		opacity: 0.8;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.code{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
	}
	.fanhui{
		width: 48upx;
		height: 48upx;
		position: fixed;
		top: 108upx;
		left: 16upx;
	}
	.fanhui image{
		width: 100%;
		height: 100%;
	}
</style>
